<template>
    <!-- 对数据进行截取 是当前页数-1 乘以 显示条数     当前页数乘以显示条数 -->
    <el-table :data="
        showlist().slice((currentPage4 - 1) * pageSize4, currentPage4 * pageSize4)
    " style="width: 100%">
        <el-table-column prop="id" label="编号" />
        <el-table-column prop="title" label="楼盘名称" />
        <el-table-column prop="type" label="房源类型" />
        <el-table-column prop="num" label="门牌号" />
        <el-table-column prop="hometype" label="房源户型" />
        <el-table-column prop="name" label="户主" />
        
        <el-table-column label="操作">
            <template #default="scope">
                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
            </template>
        </el-table-column>
        <!-- 添加删除和修改按钮结束 -->
    </el-table>
    <!-- 设置导航 -->
    <!-- 修改下面得属性 -->
    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="tableData.listdata.length"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4" />
    <!-- 弹出框组件 -->
    <Ud></Ud>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue"
import { useStore } from "vuex";
import link from "../../../api/Link.js";
import apiUrl from "../../../api/url.js";
import Ud from "../../../components/UpdateDialog.vue"
// 设置需要的参数与方法
const currentPage4 = ref(1);
const pageSize4 = ref(10);
const search = ref('');

let showlist = () => {
    return store.state.homeview.listdata
}
// 得到store对象
const store = useStore();
// 使用计算属性处理数据
// const filterTableData = computed(() =>
// store.state.homeview.tableData.filter(
//         (data:any) =>
//             !search.value ||
//             data.name.toLowerCase().includes(search.value.toLowerCase())
//     )
// )


// 修改下面得方法
const handleSizeChange = (val: number) => {
    //一页显示多少条
    pageSize4.value = val;
}
const handleCurrentChange = (val: number) => {
    //页码更改方法
    currentPage4.value = val;
}
// 添加删除和修改按钮方法与接口开始
interface User {
    date: string;
    name: string;
    address: string;
}


//修改开始
const handleEdit = (index: number, row: User) => {
    console.log(index, row);

    // 调用vuex修改
    store.commit("SET_DIALOG", row)
};


//修改结束
//删除开始
const handleDelete = (index: number, row: User) => {
    console.log(index, row);
    store.dispatch("DEL_DATA", row)
};


//删除结束
// 添加删除和修改按钮方法与接口结束
let tableData = reactive({
    listdata: [],
});

onMounted(() => {

    store.dispatch("USERUPDATE_LIST")



});
</script>